<template>
    <div class="main">
        <Picture v-for="item in Pictures" :pic="item"></Picture>
    </div>

</template>

<script setup lang="ts">
import Picture from '@/components/Home/Picture.vue'
import { ref, reactive } from 'vue'

const Pictures = reactive<String[]>([
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
    'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
    'https://scpic.chinaz.net/files/pic/pic9/201910/zzpic20739.jpg',
    'https://cn.bing.com/images/search?view=detailV2&ccid=8olSEek1&id=337FFE50570CBEA0E113BEC16941B5C9B32B8412&thid=OIP.8olSEek1RZjSQDgPizhxEAHaJ3&mediaurl=https%3a%2f%2fscpic.chinaz.net%2ffiles%2fpic%2fpic9%2f202009%2fapic27858.jpg&exph=866&expw=650&q=%e5%9b%be%e7%89%87&simid=607999977435913615&FORM=IRPRST&ck=2ECCC8716D95A1EC8BFBBF273B74945F&selectedIndex=0'
])
</script>

<style scoped lang="scss">
$header-height: 0.3rem;
$logo-width: 0.6rem;
$a-font-size: 0.08rem;

.main {
    height: auto;

    text-align: center;
    width: 100%;
    margin: $logo-width*0.2 auto; // 剧中
    columns: 4; // 默认列数
    column-gap: 30px; // 列间距
}
</style>